<template>
	<view class="container">
		<view>
			<image class="logoImg" src="@/static/images/wx.png"></image>
		</view>
		
		<button type="primary" shape="circle" class="loginButton" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>
		
		<!-- 底部信息 -->
		<view class="footer">
			<text>登录代表您已阅读并接受</text>
			<!-- 协议地址 -->
			<navigator url="/pages/member/xieyi" open-type="navigate" style="color: #007AFF;">《用户协议》</navigator>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				code: '' // 登录凭证
			};
		},
		methods: {
			getPhoneNumber(e) {
				let that = this;
				
				// 不允许授权
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					return;
				}
				
				let encryptedData = e.detail.encryptedData
				let iv = e.detail.iv
				// 检查登录态是否过期
				uni.checkSession({
					success(res) {
						that.$api.request.wxlogin({
							code: that.code,
							encryptedData: encryptedData,
							iv: iv
						}, res => {
							console.log(res)
							uni.setStorageSync("x-access-token", res.result.token)
							uni.setStorageSync("userId", res.result.userInfo.id)
							// 进入首页
							uni.switchTab({
								url: '/pages/educational/educational'
							})
						});
					},
					fail(err) {
						uni.login({
							provider: 'weixin',
							success: res => {
								that.code = res.code
								console.log(that.code)
							}
						})
						that.$api.request.wxlogin({
							code: that.code,
							encryptedData: encryptedData,
							iv: iv
						}, res => {
							console.log(res)
							uni.setStorageSync("x-access-token", res.result.token)
							uni.setStorageSync("userId", res.result.userInfo.id)
							// 进入首页
							uni.switchTab({
								url: '/pages/educational/educational'
							})
						});
					}
				})
			}
		},
		
		// 加载登录凭证
		onLoad: function (options) {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: res => {
					that.code = res.code
					console.log(that.code)
				}
			})
		}
	}
</script>

<style lang="scss">
	.logoImg {
		width: 250rpx;
		height: 250rpx;
		margin-top: 340rpx;
		border-radius:20upx
	}
     .loginButton {
		margin-top: 70%;
		background-color: #FF9900;
		width: 80%;
	}
	.footer {
		padding-left: 140upx;
		margin-top: 5%;
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		display: flex
	}

	page {
		background: #fff;
	}
	
	.container {
		top: 0;
		padding-top: 50px;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #fff;
		text-align: center;
	}
</style>
